import Vue from "vue";
import VueRouter from "vue-router";

import FindMusic from "@/views/FindMusic";
import MyMusic from "@/views/MyMusic";

// 二级路由
import Recommend from "@/views/Child/Recommend";
import Ranking from "@/views/Child/Ranking";
import SongList from "@/views/Child/SongList";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    redirect: "find"
  },
  {
    path: "/find",
    component: FindMusic,
    // 1. 找准属于哪个一级路由下属的
    // 2. 二级路由path无需加/
    children: [
      {
        path: "recommend",
        component: Recommend
      },
      {
        path: "ranking",
        component: Ranking
      },
      {
        path: "songlist",
        component: SongList
      }
    ]
  },
  {
    path: "/my",
    component: MyMusic
  }
];

const router = new VueRouter({
  routes
});

// 路由前置守卫
router.beforeEach((to, from, next) => {
  // to代表要跳转到哪个路径去, to的值是个对象可以打印看到
  // from代表从哪个路径跳过去
  console.log(to);
  console.log(from);

  // fullPath带?后面参数的, path是完整的路径
  console.log("路由要跳转了");

  // 模拟判断登录了没有, 登录后才能去我的音乐
  let loginFlag = false; // 假设false代表未登录
  if (to.path == "/my" && loginFlag == false) {
    // 如果去个人中心页面, 判断未登录, 提示登录(并强制跳转回find)
    alert("请先登录！");
    next("/find");
  } else {
    // 如果不去/my页面就直接跳转
    next();
  }
});

router.afterEach((to, form) => {
    console.log(to);
    console.log(form);
    console.log("路由发生了跳转");
})

export default router;
